<template>
    <div class="contact-us">
        <van-nav-bar title="联系我们"  left-text="返回" @click-left="onClickLeft" left-arrow/>
        <van-row class="contact-info">
                    <van-field v-model="formData.address" label="地址" is-link readonly/>
                    <van-field v-model="formData.phone" label="电话" is-link readonly/>
                    <van-field v-model="formData.c_email" label="邮箱" is-link readonly/>
        </van-row>
        <van-row class="contact-form">
                <van-field v-model="formData.name" label="姓名" placeholder="请输入您的姓名" />
                <van-field v-model="formData.email" label="邮箱" type="email" placeholder="请输入您的邮箱" />
                <van-field v-model="formData.message" label="留言" type="textarea" placeholder="请输入您的留言" rows="4" />
                <van-button round block type="primary" @click="submitForm">提交</van-button>
        </van-row>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const formData = ref({
    name: '',
    email: '',
    message: '',
    address: '北京市朝阳区XX路XX号',
    phone: '400-XXX-XXXX',
    c_email: 'info@example.com'
})
const submitForm = () => {
    console.log('提交表单', formData.value)
}
const onClickLeft = () => history.back();
</script>
<style scoped>
.contact-us {
    padding: 15px;
}

.contact-info {
    margin-bottom: 20px;
}

.contact-form .van-field {
    margin-bottom: 15px;
}

.contact-form .van-button {
    width: 100%;
    /* 使按钮宽度填满列 */
}
</style>